<template>
    <a-layout>
        <Header/>
        <a-layout>
            <a-layout-sider width="200"
                            @mouseenter="overflow_y = 'auto'"
                            @mouseleave="overflow_y = 'hidden'"
                            :style="{background: '#fff',
                            height: 'calc(100vh - 64px)',
                            'overflow-x': 'hidden',
                            'overflow-y': overflow_y}">
                <a-menu
                        :openKeys="openKeys"
                        v-model:selectedKeys="selectedKeys"
                        @openChange="onOpenChange"
                        mode="inline"
                        :style="{ height: '100%', borderRight: 0 }"
                >
                    <a-sub-menu v-for="(item,i) in menuList" :key="item.id">
                        <template #title>
                            <span>
                              <component :is="$antIcons[item.icon]"/>
                              {{item.name}}
                            </span>
                        </template>
                        <a-menu-item v-for="(subItem,index) in item.children" :key="subItem.id">
                            <template #icon>
                                <component :is="$antIcons[subItem.icon]"/>
                            </template>
                            <router-link :to="subItem.url">{{subItem.name}}</router-link>
                        </a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>
            <a-layout>
                <div style="width:calc(100vw - 200px) ;height: calc(100vh - 64px - 70px);overflow-y: auto;overflow-x: hidden">
                    <router-view/>
                </div>
                <Footer/>
            </a-layout>
        </a-layout>
    </a-layout>
</template>

<script>
    import axios from 'axios'
    import {ref, onBeforeMount,reactive,toRefs} from 'vue'

    import Header from "@/components/Header";
    import Footer from "@/components/Footer";
    import {arrayToTree} from "@/utils/Tool";
    import store from "@/store";

    export default {
        name: 'HomeView',
        components: {
            Footer,
            Header
        },
        setup() {
            const overflow_y = ref('auto')
            const menuList = ref([])
            const state = reactive({
                rootSubmenuKeys: [],
                openKeys: [],
                selectedKeys: [],
            });

            const onOpenChange = (openKeys) => {
                const latestOpenKey = openKeys.find(key => state.openKeys.indexOf(key) === -1);
                if (state.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                    state.openKeys = openKeys;
                } else {
                    state.openKeys = latestOpenKey ? [latestOpenKey] : [];
                }
            };


            onBeforeMount(() => {
                let loginUser = store.state.user
                axios.get('permission/queryByUserId/' + loginUser.id).then(rs => {
                    let menuListTemp = rs.data.filter(item => item.menuType != 2)
                    menuList.value = arrayToTree(menuListTemp,0)

                    state.openKeys = []
                    state.rootSubmenuKeys = []
                    state.openKeys.push(menuList.value[0].id)
                    menuList.value.forEach(val=>{
                        state.rootSubmenuKeys.push(val.id)
                    })
                })
            })

            return {
                overflow_y,
                menuList,
                ...toRefs(state),
                onOpenChange,
            }
        }
    }
</script>
<style>
    .routerView {
        background-color: red;
    }
</style>
